<script setup>
import {defineProps,defineEmits,ref} from 'vue'
const $emit = defineEmits()
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
let closeHandler = () => {
    $emit('update:searchVisable',false)
}

const router = useRouter()

const props = defineProps({
    searchVisable:{
        type:Boolean,
        default:()=>false
    }
})
let wd = ref('')
// 搜索处理函数
let searchHandler = () => {
    if (wd.value.trim() == '') {
        return Message.error('不能输入空字符串')
    } else {
        closeHandler()
        router.push({path:'/search',query:{wd:wd.value}})
    }
}

// console.log('propsssss',props);

</script>

<template>
    <div class="search-model" v-show="searchVisable">
    </div>

    <div class="search-content animate__animated animate__zoomInRight animate__faster" v-show="searchVisable">
        <div class="top">
           <div class="left">
            KK 影视
           </div>
           <div class="right">
            <i @click="closeHandler">x</i>
           </div>
        </div>
        <div class="bottom">
            <input type="text" v-model="wd" @keydown.enter="searchHandler" placeholder="请输入关键词" class="search-input">
            <div class="search-btn" @click="searchHandler">搜索</div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.search-model {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    width:100%;
    height:100vh;
    background:rgba(0, 0, 0, 0.472);
    backdrop-filter: blur(30px);
}

.search-content {
    position: absolute;
    z-index: 999;
    width: 420px;
    height: 200px;
    border-radius: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0px 0px 1px #ececec;
    overflow: hidden;
    .top {
        box-sizing: border-box;
        padding: 0px 10px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        width: 100%;
        height: 50px;
        // background: url(https://img.tukuppt.com/bg_grid/00/13/84/R4vlgfw5WW.jpg!/fh/350);
        background-color: rgba(103, 13, 187, 0.823);
        background-size: 240%;
        animation: bgan 3s ease-in infinite;
        i {
            transition: .3s all;
            color: #fff;
            cursor: pointer;
            &:hover {
                color: rgb(220, 7, 7);
            }
        }
    }
    .bottom {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 150px;
        box-sizing: border-box;
        padding: 20px;
        .search-input {
            width: 100%;
            height: 50px;
            border: none;
            outline: none;
            border-radius: 12px;
            color: #000;
            font-size: 18px;
            text-indent: 12px;
            transition: .3s all;
            caret-color: rgba(103, 13, 187, 0.823);
            background: rgb(241, 241, 241);
            &::placeholder {
                color: rgb(163, 165, 165);
            }
            &:hover {
                background: rgb(232, 232, 232);
            }
        }
        .search-btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 4px;
            font-size: 16px;
            color: #fff;
            transition: .3s all;
            font-weight: 600;
            background-color: rgba(103, 13, 187, 0.823);
            cursor: pointer;
            &:hover {
                background-color: rgba(93, 9, 171, 0.823);
            }
        }
    }
}

@keyframes bgan {
    0% {
        background-color: rgba(103, 13, 187, 0.823);
        background-position: 10% 30%;
        background-size: 90%;
    }
    25% {
        background-color: rgba(94, 8, 174, 0.823);
        background-position: 50% 40%;
        background-size: 120%;
    }
    50% {
        background-color: rgba(106, 22, 185, 0.823);
        background-position: 60% 50%;
        background-size: 150%;
    }
    75% {
        background-color: rgba(116, 29, 197, 0.823);
        background-position: 80% 80%;
        background-size: 180%;
    }
    100% {
        background-color: rgba(92, 29, 152, 0.823);
        background-position: 120% 120%;
        background-size: 300%;
    }

}

@media screen and (max-width: 480px) {
    .search-content {
        width: 90% !important ;
    }
}
</style>